import React, { Component } from 'react';
import './App.css';

import AddTodo from "./containers";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      task: '',
      taskState: '全部任务',
      taskList: [
        {
          checked: true,
          value: '1'
        }, {
          checked: false,
          value: '2'
        }, {
          checked: true,
          value: '3'
        },
        {
          checked: false,
          value: '4'
        }, {
          checked: true,
          value: '5'
        },
        {
          checked: false,
          value: '6'
        }
      ]
    };
  }

  taskChange(e) {
    this.setState({
      task: e.target.value
    })
  }

  addtask() {
    const t = this;
    let temp = t.state.taskList;
    temp.push({ checked: false, value: t.state.task })
    t.setState({
      taskList: temp
    })
  }

  tab(val) {
    this.setState({
      taskState: val
    })
  }

  checkChange(i, e) {
    const t = this;
    let temp = t.state.taskList;
    temp[i].checked = e.target.checked;
    t.setState({
      taskList: temp
    })
  }

  render() {
    const t = this;

    let ulList = ['全部任务', '待办任务', '已完成任务'].map((item, index) => (
      <li key={index} className={item === t.state.taskState ? 'checked' : ''} onClick={t.tab.bind(t, item)}>{item}</li>
    ));

    let olList = t.state.taskList.map((item, index) => {
      if (t.state.taskState === '待办任务') {
        return !item.checked && <li key={index}><input type="checkbox" checked={item.checked} onChange={t.checkChange.bind(t, index)} /><p>{item.value}</p></li>
      } else if (t.state.taskState === '已完成任务') {
        return item.checked && <li key={index}><input type="checkbox" checked={item.checked} onChange={t.checkChange.bind(t, index)} /><p>{item.value}</p></li>
      } else {
        return <li key={index}><input type="checkbox" checked={item.checked} onChange={t.checkChange.bind(t, index)} /><p>{item.value}</p></li>
      }

    });

    return (
      <div className='App'>
        <AddTodo />
        <dl>
          <dt><input type='text' onChange={t.taskChange.bind(t)} value={t.state.task} /></dt>
          <dd><button onClick={t.addtask.bind(t)}>添加任务</button></dd>
        </dl>
        <ul>
          {ulList}
        </ul>
        <ol>
          {olList}
        </ol>
      </div>
    );
  }
}

export default App;
